<template>
    <div>
         <div class="tupian"><img src="../assets/4.png" alt=""></div>
         <div class="box">
            <div class="touxiang"><img src="../assets/1.png" alt=""></div>
            <div class="youke">蔡徐坤</div>
            <div><van-button type="primary" @click="tuichufn">退出登录</van-button></div>
             <!-- <van-button type="info" @click="register">点击注册</van-button> -->
         </div>
    <!-- <van-button type="primary" @click="login">点击登录</van-button>
    <van-button type="info" @click="register">点击注册</van-button> -->
      
      <van-grid :border="false" :column-num="3" class="biaoge">

  <van-grid-item>
    <van-icon name="star-o" :style="{fontSize:'25px'}" @click="shoucang"/>
   <p>我的收藏</p>
  </van-grid-item>

 <van-grid-item>
    <van-icon name="wap-home-o" :style="{fontSize:'25px'}" @click="chuzu"/>
   <p>我的出租</p>
  </van-grid-item>

  <van-grid-item>
    <van-icon name="underway-o" :style="{fontSize:'25px'}" @click="login"/>
   <p>看房记录</p>
  </van-grid-item>

  <van-grid-item>
    <van-icon name="contact" :style="{fontSize:'25px'}" @click="login"/>
   <p>成为房东</p>
  </van-grid-item>

  <van-grid-item>
    <van-icon name="manager-o" :style="{fontSize:'25px'}" @click="login"/>
   <p>个人资料</p>
  </van-grid-item>

  <van-grid-item>
    <van-icon name="service-o" :style="{fontSize:'25px'}" @click="login"/>
   <p>联系我们</p>
  </van-grid-item>
    

</van-grid>
     
      <div class="tupian5"><img src="../assets/5.png" alt=""></div>

    </div>
</template>

<script>
// import request from '../utile/request.js'
export default {
    name: 'VuecliDemo4',

    data() {
        return {
            // username1:''
        };
    },

    mounted() {
    //    this.username1 = localStorage.getItem('username')
    //    console.log(this.username1);
       
    },

    methods: {

   login(){
     this.$router.push({ 
         path:'/denglu', 
          })   
   },
   register(){
   this.$router.push({ 
         path:'/zhuce', 
          })   
   },
   tuichufn(){
   localStorage.removeItem("token");
    this.$router.push({ 
         path:'/layout/wode', 
          }) 
   },
   shoucang(){
     this.$router.push({ 
         path:'/shoucang', 
          }) 
   },
   chuzu(){
         this.$router.push({ 
         path:'/chuzu', 
          }) 
   },


      
    },
};
</script>

<style lang="less" scoped>
  .tupian{
    position: absolute;
    width: 100%;
    height: 200px;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
  }
  .box{
    position: relative;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    left: 10%;
    top: 100px;
    width: 80%;
    height: 120px;
    background-color: #fff;
    box-shadow: 0 0 2px #333;
    .touxiang{
        position: relative;
        top: -20px;
        left: 20px;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 25px;
        }
    }
    .youke{
        position: relative;
        left: 32px;
        top: -10px;
        font-size: 12px;
    }
  }
  .biaoge{
    padding-top:250px; 
  }
  .tupian5{
    position: fixed;
    bottom: 50px;
    width: 100%;
    height: 100px;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
  }
</style>